<template>
  <div>
    <el-container>
      <el-header style="padding-left: 0; padding-right: 0">
        <el-menu
          :default-active="defaultActive"
          mode="horizontal"
          :ellipsis="false"
          router
        >
          <el-menu-item :route="{}">
            <div style="font-size: 20px; margin-right: 10px">Studio</div>
          </el-menu-item>
          <!-- <el-menu-item index="/promos" style="width: 100px">
            宣传
          </el-menu-item> -->
          <el-menu-item index="/categories" style="width: 100px">
            类目
          </el-menu-item>

          <el-menu-item index="/products" style="width: 100px">
            产品
          </el-menu-item>

          <el-menu-item index="/showcases" style="width: 100px">
            案例
          </el-menu-item>

          <div class="flex-grow"></div>
          <el-menu-item index="/auth" @click="logout">退出</el-menu-item>
        </el-menu>
      </el-header>

      <router-view></router-view>
    </el-container>
  </div>
</template>

<script>
import { useUserStore } from "../stores";
export default {
  data() {
    return {
      userStore: useUserStore(),
      defaultActive: "/orders",
    };
  },
  async created() {
    this.defaultActive = window.location.pathname;
  },

  methods: {
    logout() {
      this.userStore.logout();
    },
  },
};
</script>
